<template>
  <div>
    <n-card class="boxShadow" size="small">
    <n-space>
      <n-tag type="info" :bordered="false" size="large">
        国服英雄数据排行
      </n-tag>
      <n-select v-model:value="tier" style="width: 118px"
                :options="options" @update:value="getChampRankData(tier,lane)"/>
    </n-space>
    <n-space>
      <n-button :bordered=false ghost @click="getComprehensiveRankData"
                :type="isCheck ==1 ? 'info' : 'default'" size="small" class="isHover">
        综合
      </n-button>
      <n-button :bordered=false ghost @click="getWinRankData"
                :type="isCheck ==2 ? 'info' : 'default'" size="small" class="isHover">
        胜率
      </n-button>
      <n-button :bordered=false ghost @click="getAppearanceRankData"
                :type="isCheck ==3 ? 'info' : 'default'" size="small" class="isHover">
        登场率
      </n-button>
      <n-button :bordered=false ghost @click="getBanRankData"
                :type="isCheck ==4 ? 'info' : 'default'" size="small" class="isHover">
        禁用率
      </n-button>
    </n-space>
  </n-card>
    <n-card class="boxShadow" size="small" style="margin-top: 17px">
      <n-list>
      <template #header>
        <n-space justify="space-evenly">
          <n-button :bordered=false text ghost @click="fromPositionGetData('top')"
                    :type="isCheck ==1 ? 'info' : 'default'" size="small" class=" imgTop addMargin">
          </n-button>
          <n-button :bordered=false text ghost @click="fromPositionGetData('jungle')"
                    :type="isCheck ==1 ? 'info' : 'default'" size="small" class=" imgJug addMargin">
          </n-button>
          <n-button :bordered=false text ghost @click="fromPositionGetData('mid')"
                    :type="isCheck ==1 ? 'info' : 'default'" size="small" class=" imgMid addMargin">

          </n-button>
          <n-button :bordered=false text ghost @click="fromPositionGetData('bottom')"
                    :type="isCheck ==1 ? 'info' : 'default'" size="small" class=" imgBot addMargin">
          </n-button>
          <n-button :bordered=false text ghost @click="fromPositionGetData('support')"
                    :type="isCheck ==1 ? 'info' : 'default'" size="small" class=" imgSup addMargin">
          </n-button>
        </n-space>
      </template>
      <n-scrollbar style="max-height: 450px" >
        <n-list-item v-for="chapm in champSliceList" >
        <n-space justify="space-evenly" >
          <n-avatar
            round
            :bordered="false"
            :size="50"
            :src=chapm.imgUrl
            fallback-src="https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/4027.png"
            style="display: block"
            @click = "getRestraintData(chapm.champId,lane,chapm.imgUrl,chapm.name,chapm.tLevel,chapm.win,chapm.ban)"
          />
          <n-space vertical>
            <n-space style="margin-bottom: -12px" justify="space-between">
              <p>{{ chapm.name }}</p>
              <div :class="'imgT'+chapm.tLevel" ></div>
            </n-space>
            <n-space class="textColorSecend" justify="space-between" >
              <p>胜率 {{ chapm.win }} </p>
              <p>禁用 {{ chapm.ban }} </p>
            </n-space>
          </n-space>

        </n-space>
      </n-list-item>
      </n-scrollbar>
    </n-list>
    </n-card>
    <n-drawer v-model:show="restraintActive"
              style="border-top-left-radius: 12px;border-top-right-radius: 12px"
              :height="485" placement="bottom">
      <n-drawer-content>
        <n-list>
          <template #header>
            <n-space>
              <n-avatar
                round
                :bordered="false"
                :size="50"
                :src=selectedList[0]
                fallback-src="https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/4027.png"
                style="display: block"
                @click = changeRestraint
              />
              <n-space vertical>
                <n-space style="margin-bottom: -12px" justify="space-between">
                  <p>{{ selectedList[1] }}</p>
                  <div :class="'imgT'+selectedList[2]" ></div>
                </n-space>
                <n-space class="textColorSecendDrawer" justify="space-between" style="width: 100%;">
                  <p>胜率 {{ selectedList[3] }} </p>
                  <p>禁用 {{ selectedList[4] }} </p>
                  <p style="color: #ff6666" v-if="isRestraint">英雄反制</p>
                  <p style="color: #18a058" v-else>优势对线</p>
                </n-space>
              </n-space>
            </n-space>
          </template>
          <n-scrollbar style="max-height: 372px">
            <n-list-item v-for="champRes in restraintList">
              <n-space class=alignCenter>
                <n-avatar
                  round
                  :bordered="false"
                  :size="50"
                  :src= champRes[1]
                  fallback-src="https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/4027.png"
                  style="display: block"
                />
                <n-tag type="success" :bordered="false"
                       style="width: 100px;justify-content: center">
                  胜率 {{(champRes[2]*0.01).toFixed(1)+'%'}}
                </n-tag>
                <p>{{champRes[0]}}</p>
              </n-space>
            </n-list-item>
          </n-scrollbar>
        </n-list>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script>
import {
  NAvatar, NBadge, NButton, NCard, NGi, NGrid, NIcon, NInput, NList, NScrollbar,
  NListItem, NModal, NPopconfirm, NPopover, NSelect, NSpace, NTag, useMessage,NDrawer,NDrawerContent,
} from "naive-ui";
import {ref, onMounted} from "vue";
import {request} from "../../../utils/render/request"
import {champDict} from "@/utils/render/lolDataList";

export default {
  name: "champRank",
  components: {
    NCard, NAvatar, NSpace, NTag, NModal, NGrid, NGi, NIcon, NBadge, NPopconfirm,
    NInput, NButton, NSelect, NPopover, NList, NListItem,NScrollbar,useMessage,NDrawer,NDrawerContent,
  },
  setup() {

    let tier = ref(200)
    let champSliceList = ref([])
    const options = [
      {
        label: '王者',
        value: 0
      },
      {
        label: '宗师',
        value: 5
      },
      {
        label: '大师',
        value: 6
      },
      {
        label: '砖石',
        value: 10
      },
      {
        label: '铂金',
        value: 20
      },
      {
        label: '黄金',
        value: 30
      },
      {
        label: '白银',
        value: 40
      },
      {
        label: '黄铜',
        value: 50
      },
      {
        label: '黑铁',
        value: 80
      },
      {
        label: '铂金以上',
        value: 200
      },
      {
        label: '之巅铂金以上',
        value: 311
      },
    ]
    const isCheck = ref(1)
    let lane = ref('mid')
    let restraintActive = ref(false)
    let restraintList = ref([])
    let selectedList = ref([])
    let isRestraint = ref(true)

    const message = useMessage()

    onMounted(() => {
      let rankSetDiv = document.querySelector('#app > div.slide-in-right > div:nth-child(1) > div')
      rankSetDiv.style['padding-bottom'] = '6px'
      getChampRankData(tier.value,lane.value,getLacalDateStr()).then(() => {
        if (champSliceList.value.length == 0){
          message.success('数据获取成功 !')
        }
      })

    })
    // 转换百分数
    const toPercent = (point) => {
      var str = Number(point * 100).toFixed(1);
      str += "%";
      return str;
    }
    // 获取当前日期
    const getLacalDateStr = () => {
      let currentDate = new Date()
      let dateList = currentDate.toLocaleDateString().split('/')
      dateList[1] = dateList[1].length == 1 ? '0' + dateList[1] : dateList[1]
      return parseInt(dateList.join('')) - 2
    }
    // 获取国服英雄数据排行
    const getChampRankData = async (tier,lane,time) => {
      let partUrl = 'https://x1-6833.native.qq.com/x1/6833/1061021&3af49f?championid=666'
      let championdetails
      const res = await request({
        url: partUrl + `&lane=${lane}&ijob=all&dtstatdate=${time}&gamequeueconfigid=420&tier=${tier}`,
        method: 'GET',
      })
      if (res.data.data.result == ""){
        return getChampRankData(tier,lane,time-1)
      }

      try {
        championdetails = JSON.parse(res.data.data.result).championdetails
      } catch (e) {
        champSliceList.value = []
        return null
      }

      let chapmDetailList = championdetails.split('#')
      champSliceList.value = []
      for (const [index, chapmDetailListElement] of chapmDetailList.entries()) {
        let sliceIndex = chapmDetailListElement.indexOf('_[')
        let dataStr = index < 9 ? chapmDetailListElement.slice(2, sliceIndex) : chapmDetailListElement.slice(3, sliceIndex)
        let dataList = dataStr.split('_')

        champSliceList.value.push({
          sortId:index,
          imgUrl: `https://game.gtimg.cn/images/lol/act/img/champion/${champDict[dataList[0]]['alias']}.png`,
          name: champDict[dataList[0]]['label'],
          tLevel: dataList[1],
          win: toPercent(parseFloat(dataList[2])),
          ban: toPercent(parseFloat(dataList[3])),
          appearance: toPercent(parseFloat(dataList[4])),
          champId:dataList[0]
        })
      }
    }
    // 更换位置重新获取排位数据
    const fromPositionGetData = (pos) => {
      isCheck.value = 1
      lane.value = pos
      getChampRankData(tier.value,lane.value,getLacalDateStr())
      switch (pos) {
        case pos = 'top': message.success('上单数据更新成功 !'); break;
        case pos = 'jungle': message.success('打野数据更新成功 !'); break;
        case pos = 'mid': message.success('中单数据更新成功 !'); break;
        case pos = 'bottom': message.success('下路数据更新成功 !'); break;
        case pos = 'support': message.success('辅助数据更新成功 !'); break;
      }
    }
    // 根据不同的参数进行 快速排序
    const quickSort = (factor) => {
      champSliceList.value.sort((x,y) => {
        return factor == 'sortId' ? parseFloat(x[factor])-parseFloat(y[factor]) :parseFloat(y[factor])-parseFloat(x[factor])
      })
    }
    // 根据综合数据改变排行
    const getComprehensiveRankData = () => {
      isCheck.value = 1
      quickSort('sortId')
    }
    // 根据胜率数据改变排行
    const getWinRankData = () => {
      isCheck.value = 2
      quickSort('win')
    }
    // 根据出场率改变排行
    const getAppearanceRankData = () => {
      isCheck.value = 3
      quickSort('appearance')
    }
    // 根据禁用率改变排行
    const getBanRankData = () => {
      isCheck.value = 4
      quickSort('ban')
    }
    // 获取英雄反制数据
    const getRestraintData = async (champId,position,imgUrl,name,level,win,ban) => {
      restraintList.value = []
      selectedList.value = [imgUrl,name,level,win,ban]
      restraintActive.value = true
      const url = `https://lol.qq.com/act/lbp/common/guides/champDetail/champDetail_${champId}.js?ts=2760378`
      const result = await request({
        'url': url,
        method: 'GET',
        params: {ts: '2760378'}
      })
      let detailsData = JSON.parse(result.data.split('=')[1].split(';/*')[0])
      let restraintJson = detailsData.list.championFight[position]
      let resList = []

      for (const restraintListElement of restraintJson) {
        const chapmId = restraintListElement.championid2
        const label = champDict[chapmId].label
        const imgUrl = `https://game.gtimg.cn/images/lol/act/img/champion/${champDict[chapmId].alias}.png`
        const winRate =10000-Number(restraintListElement.winrate)
        resList.push([label,imgUrl,winRate])
      }
      resList.sort((a,b) => {
        return a[2] < b[2] ? 1 : -1
      })
      restraintList.value = resList
    }
    // 改变是否为英雄克制 或者优势对线
    const changeRestraint = () => {
      isRestraint.value = isRestraint.value == true ? false : true
      if (!isRestraint.value){
        restraintList.value.sort((x,y) => {
          return x[2] > y[2] ? 1 : -1
        })
      }else {
        restraintList.value.sort((x,y) => {
          return x[2] < y[2] ? 1 : -1
        })
      }
    }
    return {
      tier, options, isCheck, champSliceList,lane,
      restraintActive,restraintList,selectedList,isRestraint,
      getComprehensiveRankData, getWinRankData,getRestraintData,getAppearanceRankData,
      getBanRankData,getChampRankData,fromPositionGetData,quickSort,changeRestraint
    }
  }
}
</script>

<style scoped>

.boxShadow {
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08),
  0 3px 6px 0 rgba(0, 0, 0, 0.06),
  0 5px 12px 4px rgba(0, 0, 0, 0.04);;
}

.n-card {
  margin: 15px;
  border-radius: 10px;
  width: auto;
}

.n-tag {
  border-radius: 5px;
}

.isHover:hover {
  background-color: #ffffff;
  color: #4098fc;
}

.imgT0 {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/t0.svg');
  display: inline-block;
  background-repeat: no-repeat;
}

.imgT1 {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/t1.svg');
  display: inline-block;
  background-repeat: no-repeat;
}

.imgT2 {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/t2.svg');
  display: inline-block;
  background-repeat: no-repeat;
}

.imgT3 {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/t3.svg');
  display: inline-block;
  background-repeat: no-repeat;
}
.imgT4 {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/t4.svg');
  display: inline-block;
  background-repeat: no-repeat;
}


.imgTop {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/top.svg');
  display: inline-block;
}
.imgMid {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/mid.svg');
  display: inline-block;
  background-repeat: no-repeat;
  color: #4098fc;

}
.imgJug {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/jug.svg');
  display: inline-block;
  background-repeat: no-repeat;
}
.imgBot {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/bot.svg');
  display: inline-block;
  background-repeat: no-repeat;
}
.imgSup {
  font-size: 0px;
  width: 24px;
  height: 24px;
  background-image: url('../../assets/tLevel/sup.svg');
  display: inline-block;
  background-repeat: no-repeat;
}
.addMargin {
  margin-right: 5px;
  margin-left: 5px;
}
.svg {
  fill: currentColor;
  color: red;
}

.textColorSecend {
  color: #9AA4AF;
  font-size: 13px;
  width: 150px;
}
.textColorSecendDrawer {
  color: #9AA4AF;
  font-size: 12px;
  width: 150px;
}
.alignCenter {
  align-items: center;
}
</style>
